<template>
  <div class="log s-singlePage">
    <searchForm ref="searchForm" @sub="onSearch" @add="add"></searchForm>
    <div class="table">
      <el-table
          :header-cell-style="{background:'#F8F9FA'}"
          :data="tableData"
          v-loading="loading"
          :height="'calc(100% - 0px)'"
          stripe>
        <el-table-column
            prop=""
            width="80"
            label="">
        </el-table-column>
        <el-table-column
            prop="appUrl"
            label="应用跳转链接">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称">
        </el-table-column>
        <el-table-column
            label="图片链接">
          <template slot-scope="scope">
            <img v-if="null!==scope.row.picUrl" :src="scope.row.picUrl" style="height: 50px" alt=""/>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
          <template slot-scope="scope">
            <sapn>{{0===scope.row.status?'启用':'禁用'}}</sapn>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button @click="add(scope.row,'see')" type="text" size="small">查看</el-button>
            <el-button @click="add(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="del(scope.row)" type="text" size="small" style="color: #F56C6C">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @pageChange="pageChange"></pagination>
    </div>
    <el-drawer :title="undefined===form.id?'新增':'编辑'"
               :visible.sync="dialogVisible"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               size="39%">
      <el-form ref="form"
               :model="form"
               label-width="120px">
        <el-form-item label="应用跳转链接">
          <el-input :disabled="see" style="width: 220px" v-model="form.appUrl"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input :disabled="see" style="width: 220px" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status" :disabled="see">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片链接">
          <upload-img v-if="!see" @set="set" ref="img" :files="file"></upload-img>
          <img v-else :src="file[0].url" style="width: 148px;height: 148px"/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="dialogVisible=false">取 消</el-button>
          <el-button size="small" type="primary"
                     @click="sub">确 定</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>
  </div>
</template>

<script>
import searchForm from "../applicationCenter/components/searchForm";
import pagination from "../../../components/pagination";
import uploadImg from "../../../components/uploadImg";
export default {
  name: "",
  components:{
    searchForm,
    pagination,
    uploadImg
  },
  mounted() {
    this.getLoginLog();
  },
  methods:{
    set(url){
      this.form.picUrl=url
    },
    del(row){
      this.$confirm('此操作将删本条应用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
          .then(() => {
            let params = { id: row.id }
            this.$api.delApplicationCenter(params).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.getLoginLog()
            })
          })
          .catch(() => {})
    },
    sub(){
      if(undefined===this.form.id){
        this.$api.addApplicationCenter(this.form).then(res=>{
          if(200===res.code){
            this.$message.success('新增成功！')
            this.getLoginLog()
            this.dialogVisible=false
          }else{
            this.$message.error('新增失败！')
          }
        }).catch()
      }else{
        this.$api.editApplicationCenter(this.form).then(res=>{
          if(200===res.code){
            this.$message.success('编辑成功！')
            this.getLoginLog()
            this.dialogVisible=false
          }else{
            this.$message.error('编辑失败！')
          }
        }).catch()
      }

    },
    pageChange(page){
      this.pageInfo.page = page;
      this.getLoginLog();
    },
    getLoginLog(){
      this.loading = true
      let params = {
        name:this.$refs.searchForm.searchPar,
        page:this.pageInfo.page - 1,
        pageSize:this.pageInfo.pageSize
      }
      this.$api.queryApplicationCenterList(params).then(res=>{
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
        this.loading = false
      })
    },
    add(row,d){
      if(undefined!==d){
        this.see=true
      }else{
        this.see=false
      }
      if(undefined!==row){
        this.form=JSON.parse(JSON.stringify(row))
        if(null!==row.picUrl){
          this.file=[{url:row.picUrl}]
        }
      }else{
        this.form={}
        this.file=''
      }
      this.dialogVisible=true
    },

    onSearch(){
      this.pageInfo.page = 1;
      this.getLoginLog();
    },
  },
  data() {
    return {
      see:false,
      file:'',
      form:{},
      dialogVisible:false,
      tableData: [],
      loading:false,
      pageInfo:{
        page:1,
        pageSize:10,
        total:0
      }
    }
  }
}
</script>

<style scoped lang="less">
.table{
  height:  calc(100% - 130px);
}
.log{
  padding: 15px;
}
</style>
